<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css?v=3">
    <title>Liuz's Notes</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link ref="manifest" href="/manifest.json">
    <style>
        :root {
            --app-column-count: 1;
        }

        @media screen and (min-width: 600px) {
            :root {
                --app-column-count: 2;
            }
        }
        @media screen and (min-width: 800px) {
            :root {
                --app-column-count: 3;
            }
        }

        @media screen and (min-width: 1200px) {
            :root {
                --app-column-count: 4;
            }
        }

        ul#toc {
            column-count: var(--app-column-count);
        }

        a {
            color: steelblue;
        }


    </style>
</head>
<body>
    <h1>文章列表</h1>

    <div class="action flex">
        <input class="keyword flex-1" type="text" placeholder="输入关键词">
        <button class="clear">重置</button>
    </div>

    <ul id="toc">
        <li><a href="./canvas.html">Canvas</a></li>
        <li><a href="./emacs.html">Emacs</a></li>
        <li><a href="./foxglove-studio.html">Foxglove Studio</a></li>
        <li><a href="./git-lfs.html">Git LFS</a>: Git Large File Storage</li>
        <li><a href="./javascript.html">JavaScript</a></li>
        <li><a href="./jest.html">Jest</a>：一个 JavaScript 测试框架</li>
        <li><a href="./oidc-client.html">OIDC Client js</a></li>
        <li><a href="./sentry.html" title="哨兵">Sentry</a>：应用监控和错误跟踪软件</li>
        <li><a href="./rust.html">Rust</a>: A language empowering everyone to build reliable and efficient software</li>
	<li><a href="./shell.html">Shell</a></li>
        <li><a href="./svg.html">SVG</a>：Scalable Vector Graphics</li>
        <li><a href="./threejs.html">Three.js</a>：JavaScript 3D Library</li>
        <li>
            <a href="./typescript.html">TypeScript</a> &equals; JavaScript &plus; Type
        </li>
        <li><a href="./vue.html">Vue</a>：一个渐进式 UI 框架</li>
        <li><a href="./yarn.html">Yarn</a> &equals; 包管理器 &plus; 项目管理器</li>
    </ul>

    <script>
        addFilter("#toc", ".action");

        /**
         * 增加搜索过滤功能
         * @param {string} list 待过滤的列表容器
         * @param {string} action 搜索动作容器
         **/
        function addFilter(list, action) {
            const $list = $(list);
            const $action = $(action);
            const $input = $('.keyword', $action);
            const $clear = $('.clear', $action);
            const delay = 500;
            let timer = null;

            $input.oninput = function() {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    filter($list, $input.value);
                }, delay);
            }

            $clear.onclick = function() {
                $input.value = '';
                filter($list, '');
            }
        }

        /**
         * @param {HTMLElement} list
         * @param {string} keyword
         **/
        function filter(list, keyword) {
            const items = Array.from(list.children);

            if (!keyword) {
                items.forEach(item => {
                    item.classList.remove('hide');
                });
            } else {
                const keywordi = keyword.toLowerCase();
                items.forEach(item => {
                    if (item.textContent.toLowerCase().includes(keywordi)) {
                        item.classList.remove("hide");
                    } else {
                        item.classList.add("hide");
                    }
                });
            }
        }

        function $(el, parent) {
            return (parent || document).querySelector(el);
        }
    </script>
</body>
</html>
